//头部组件  元素标题 设置图标等
import React from 'react';
import { ELEMENT_TYPES } from '../../constants/ActionTypes';
import { isEqual, isEmpty } from 'lodash';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import { onShowOrHideE } from '../../util/common';
import { dragStart } from '../../util/drag';
import Toolbar from '../common/Toolbar';
import TitleTabPane from './TitleTabPane';

class EHeader extends React.Component {
  constructor(props) {
      super(props);
      this.state = {}
      this.handleDragStart = this.handleDragStart.bind(this);
      this.setPosition = this.setPosition.bind(this);
  }
  handleDragStart(event){
      const { config, handleRefresh } = this.props;
      if(!config.item.header.onmousedown) return;
      let callback;
      if(config.item.ebaseid === ELEMENT_TYPES.CUSTOMPAGE) callback = handleRefresh;
      dragStart(event, event.target, callback);
  }
  componentDidMount(){
    this.setPosition();
  }
  componentDidUpdate(){
    this.setPosition();
  }
  setPosition() {
    const { config } = this.props;
    const { left, width } = this.state;
    const { eid } = config.item;
    const titleWidth= $(`#title_${eid}`).width();
    const titleLeft= $(`#title_${eid}`).position() && $(`#title_${eid}`).position().left;
    const toolbarWidth= $(`#toolbar_${eid}`).width();
    let moreposition='';
    if(config.item.header.toolbar.more!=null){
      if(config.item.header.toolbar.more.position!=null){
        moreposition=config.item.header.toolbar.more.position;
      }
    }
    let newwidth=titleWidth+titleLeft+90+20+5+27;
    if(config.item.header.toolbar.more==null||moreposition=='footer'){
      newwidth=titleWidth+titleLeft+90+20+2;
    }else{
      newwidth=titleWidth+titleLeft+90+20+5+27;
    }
    if((!width || !isEqual(width, newwidth)) && titleWidth != null) {
        this.setState({
            left: titleWidth + titleLeft + 10,
            width: newwidth
        })
    }
  }
  render() {
      const {left=0, width=0} = this.state;
      const { config, handleRefresh, handleDelete, fontSizeMp = {}, datas={},needMore=true, customClickMore } = this.props;
      const {tabids=[], isAlwaysShow='0',tabstyle, tabvalue} = datas;
      const { eid, header, ebaseid } = config.item;
      let { fontStyle = {} } = config.item;
      if(!isEmpty(fontSizeMp)){
          fontStyle = fontSizeMp;
      }
      let className = tabids.length <= 1 && isAlwaysShow == '0' ? 'nodisplay' : '';
      let nowtabstyle=  header.displayPosition && header.displayPosition == 'right'&&tabstyle == '1' && tabvalue ?`tabstyle_right_${tabvalue}`:'';
      let tabsty=tabids.length <= 1 && isAlwaysShow == '0' ?' ':nowtabstyle
      return <div className={`header ${tabsty}`} style={header.style}
            data-issetting="false" 
            data-sharelevel="2" 
            id={`header_${eid}`} 
            onMouseDown={this.handleDragStart}>
                    <span className="icon" id={`icon_${eid}`} style={{position:'absolute',cursor:'pointer'}}>
                        <img alt='' border="0"  src={header.iconimg.src} title={header.iconimg.title} onClick={onShowOrHideE.bind(this,eid)}/>
                     </span>

              <span className={fontStyle.titlefontsize ? `wea-f${fontStyle.titlefontsize} title` : 'title'} id={`title_${eid}`} style={{position:'absolute', lineHeight: 1}}>
                  <font className="title-font" id={`element_title_name_${eid}`}>{header.title}</font>
                  <span id={`count_${eid}`}></span>
              </span>
            {
                  header.displayPosition && header.displayPosition == 'right' && <div id={`titleContainer_${eid}`} className={`titlecontainer ${className}`} style={{position: 'relative', left: `${left}px`,
                      width: `calc(100% - ${width}px)`, zIndex: '1', backgroundColor: 'white'}}>
                      <TitleTabPane ecId={`${this && this.props && this.props.ecId || ''}_TitleTabPane@fsm27o`} datas={datas} fontStyle={fontStyle} ebaseid={ebaseid}/>
                  </div>
              }
              <Toolbar ecId={`${this && this.props && this.props.ecId || ''}_Toolbar@dm57dj`} datas={datas} config={config} handleDelete={handleDelete} handleRefresh={handleRefresh} getElementStyle={this.props.getElementStyle} needMore={needMore} customClickMore={customClickMore}/>
              <span className="toolbarSub" id={`toolbarSub_${eid}`}></span>
        </div>
  }
}
import { WeaErrorPage, WeaTools } from 'ecCom';
class MyErrorHandler extends React.Component {
  render() {
    const hasErrorMsg = this.props.error && this.props.error !== "";
    return (
      <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@58m37n`} msg={hasErrorMsg ? this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
    );
  }
}
EHeader = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(EHeader);
export default EHeader;
